<template>
  <div
    :style="{ paddingLeft: `${left}px` }"
    :class="{'marked-editor-max': amplification}"
    class="marked-custom-editor">
    <el-row
      :gutter="10"
      clsss="w-el-row">
      <el-col
        :span="12"
        clsss="w-el-col">
        <el-input
          v-model="textareaStr"
          class="textarea"
          type="textarea"
          placeholder="请输入内容"/>
      </el-col>
      <el-col
        :span="12"
        clsss="w-el-col">
        <div class="marked-editor-sprsing">
          <w-psrsing :datastr="textareaStr"/>
        </div>
      </el-col>
    </el-row>
    <div class="other-icon">
      <i
        v-if="amplification"
        class="el-icon-circle-close icon w-pointer"
        @click="amplification = false"/>
      <i
        v-else
        class="el-icon-rank icon w-pointer"
        @click="amplification = true"/>
      <i
        v-if="savebtn"
        class="el-icon-document icon w-pointer"
        @click="saveClick"/>
      <i
        v-if="imgbtn"
        class="el-icon-picture-outline icon w-pointer"
        @click="imgPop.isShow = true"/>
      <el-dropdown
        @command="markdownInfoCommandChange"
        size="mini">
        <i class="el-icon-question icon w-pointer"/>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(v, k) in markdownInfo.titles"
            :command="`${k}`"
            :key="v">{{ v }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog
      :visible.sync="imgPop.isShow"
      :append-to-body="false"
      :modal-append-to-body="false"
      title="图片上传"
      width="500px">
      <div class="image-up-pop-content">
        <w-image-up
          ref="IMAGE_UP"
          :input-src="imgPop.url"
          class="image-up"/>
        <p class="up-image-url">
          <icon-copy
            v-if="imgPop.url"
            class="copy-icon w-pointer"
            width="20px"
            height="20px"
            @click.native="copyBtnClick"
            fill="#666"/>
          <span>{{ imgPop.url }}</span>
        </p>
      </div>
      <span
        slot="footer"
        class="dialog-footer">
        <el-button
          :loading="imgPop.loading"
          :disabled="imgPop.loading"
          type="primary"
          size="mini"
          @click="imageUpClick">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="`Markdown提示(${markdownInfo.titles[markdownInfo.index]})`"
      :visible.sync="markdownInfo.popIsShwo"
      width="500px">
      <p
        :key="k"
        v-for="(v, k) in markdownInfo.codes[markdownInfo.index]">
        {{ v }}
      </p>
    </el-dialog>
  </div>
</template>

<script>
  import WPsrsing from '@/components/global/marked/parsing'
  import WImageUp from '@/components/global/imageUp/oss'
  import IconCopy from '@/icons/copy.svg'

  export default {
    name: 'MarkedCustomEditor',
    components: {
      WPsrsing,
      WImageUp,
      IconCopy
    },
    props: {
      /**
       * 距离左侧距离
       */
      left: {
        type: Number,
        default: 0
      },
      /**
       * 是否显示保存按钮
       */
      savebtn: {
        type: Boolean,
        default: true
      },
      /**
       * 是否显示图片按钮
       */
      imgbtn: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        /**
         * 输入的数据
         */
        textareaStr: '',
        /**
         * 是否放大
         */
        amplification: false,
        /**
         * 图片弹窗
         */
        imgPop: {
          isShow: false,
          url: null,
          loading: false
        },
        /**
         * Markdown 提示
         */
        markdownInfo: {
          // 弹窗是否显示
          popIsShwo: false,
          index: '0',
          titles: ['图片', '超链接', '表格', '折叠'],
          codes: [
            [
              `![图片alt](图片地址 ''图片title'')`,
              `<img src="" width = "400"/>`
            ],
            [
              `[超链接名](超链接地址 "超链接title")`
            ],
            [
              `表头|表头|表头`,
              `---|:--:|---:`,
              `内容|内容|内容`,
              `两边加：表示文字居中`,
              `右边加：表示文字居右`
            ],
            [
              `<details>`,
              `<summary>标题</summary>`,
              `内容!!!`,
              `</details>`
            ]
          ]
        }
      }
    },
    methods: {
      /**
       * 获取数据
       * @returns {string}
       */
      getData() {
        return this.textareaStr
      },
      /**
       * 设置数据
       * @param data
       */
      setData(data) {
        this.textareaStr = data
      },
      /**
       * 保存按钮点击
       */
      saveClick() {
        this.$emit ('save')
      },
      /**
       * 图片上传按钮点击
       * @returns {Promise<void>}
       */
      imageUpClick() {
        this.imgPop.loading = true
        this.$refs['IMAGE_UP'].upImage ().w_then_finally((data) => {
          this.imgPop.url = data
        }, () => {
          this.imgPop.loading = false
        })
      },
      /**
       * 粘贴板
       */
      copyBtnClick() {
        this.$copyText (this.imgPop.url).then (() => {
          this.$w_popview.msgSuccess ('已复制粘贴板')
        }, function () {
          this.$w_popview.msgError ('复制粘贴板失败')
        })
      },
      /**
       * Markdown 提示事件
       * @param command
       */
      markdownInfoCommandChange(command) {
        this.markdownInfo.popIsShwo = true
        this.markdownInfo.index = command
      }
    }
  }
</script>

<style lang="scss">
  .marked-custom-editor {
    position: relative;

    .marked-editor-sprsing {
      height: calc(100vh - 30px);
      overflow: auto;
      border: 1px solid #d3d7e1;
      border-radius: 4px;
    }

    .textarea {
      textarea {
        height: calc(100vh - 30px);
        resize: none;
      }
    }

    .other-icon {
      position: absolute;
      right: 20px;
      top: 20px;
      display: flex;
      flex-direction: column;

      .icon {
        color: #999;
        margin-bottom: 7px;
      }

      > .icon:hover {
        color: coral;
      }
    }
  }

  .marked-editor-max {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    background-color: #fff;
    padding-left: 0px !important;

    .marked-editor-sprsing {
      height: calc(100vh);
    }

    .textarea {
      textarea {
        height: calc(100vh);
      }
    }
  }

  .image-up-pop-content {
    position: relative;

    > .image-up {
      position: absolute;
      left: 0;
      top: 0;
    }

    > .up-image-url {
      background-color: #eee;
      border-radius: 3px;
      margin: 0 0 0 200px;
      box-sizing: border-box;
      padding: 10px;
      word-wrap: break-word;
      line-height: 22px;
      color: #999;
      height: 200px;

      > .copy-icon {
        position: absolute;
        right: 5px;
        bottom: 5px;
      }
    }
  }
</style>
